import moment from 'moment'

export function nullDisplay(h, options) {
  return h(
    'span',
    {
      attrs: {
        class: 'not-set'
      }
    },
    (options && options.nullText) || 'un set'
  )
}

const dataType = {
  // 日期组件设置
  date: {
    props: ['value', 'options'],
    render(h) {
      if (!this.value) {
        return nullDisplay(h, this.options)
      }
      const date = moment(this.value * 1000)
      return h('div', {}, date.format('YYYY-MM-DD'))
    }
  },

  // 日期时间组件设置
  datetime: {
    props: ['value', 'options'],
    render(h) {
      if (!this.value) {
        return nullDisplay(h, this.options)
      }
      const datetime = moment(this.value * 1000)
      return h('div', {}, datetime.format('YYYY-MM-DD HH:mm:ss'))
    }
  },

  // 日期时间组件设置
  datetimeRow: {
    props: ['value', 'options'],
    render(h) {
      if (!this.value) {
        return nullDisplay(h, this.options)
      }
      const datetime = moment(this.value * 1000)
      return h('div', [h('div', datetime.format('L')), h('div', datetime.format('HH:mm A'))])
    }
  },

  // 图片组件设置
  image: {
    props: {
      value: String,
      options: Object
    },
    render(h) {
      var options = Object.assign(
        {
          fit: 'contain',
          defaultIcon: 'em-icon-shape-sns-chat-error'
        },
        this.options
      )
      const { fit, defaultIcon } = options
      return h('el-image', {
        props: {
          src: this.value,
          fit: fit
        },
        scopedSlots: {
          error: () => {
            return h('em-icon', {
              props: {
                name: defaultIcon
              }
            })
          }
        }
      })
    }
  },

  // 视频组件设置
  video: {
    props: ['data', 'options'],
    render(h) {
      return h('div', [
        h('p', '视频组件'),
        h('video', {
          attrs: {
            src: this.data.url,
            controls: 'controls',
            autoplay: 'autoplay'
          }
        })
      ])
    }
  },

  // CELL组件设置
  cell: {
    props: {
      value: [String, Number],
      row: Object,
      options: Object
    },
    render(h) {
      const { cellOptions } = this.options
      var _opts = {}
      Object.keys(cellOptions).forEach(key => {
        var attribute = cellOptions[key]
        _opts[key] = this.row[attribute]
      })
      return h('em-cell', {
        attrs: _opts
      })
    }
  },

  // 文本组件设置
  text: {
    props: {
      value: [String, Number],
      options: Object
    },
    render(h) {
      return h(
        'div',
        {
          attrs: this.options
        },
        this.value
      )
    }
  },

  // 百分比组件设置
  percent: {
    props: {
      value: [String, Number],
      options: Object
    },
    render(h) {
      var value = parseFloat(this.value)
      if (isNaN(value)) {
        return nullDisplay(h, this.options)
      } else {
        value = (value * 100).toFixed(2)
      }
      return h(
        'div',
        {
          attrs: this.options
        },
        Number(value) + '%'
      )
    }
  },

  // 文本组件设置
  tag: {
    props: {
      value: [String, Number, Array, Object],
      options: Object
    },
    render(h) {
      const props = Object.assign(
        {
          size: 'mini',
          type: ''
        },
        this.options
      )

      var array = []
      if (this.value instanceof Array) {
        array = array.concat(this.value)
      } else if (this.value instanceof Object) {
        for (const i in this.value) {
          array.push(this.value[i])
        }
      } else {
        array.push(this.value)
      }
      return h(
        'div',
        array.map(item => {
          return h(
            'el-tag',
            {
              props: props
            },
            item
          )
        })
      )
    }
  },

  // 备注组件设置
  mark: {
    props: {
      value: [String, Number],
      options: Object
    },
    render(h) {
      const value = this.options.data && this.options.data[this.value]
      if (value instanceof Object) {
        const opts = Object.assign(
          {
            size: 'mini',
            class: '',
            color: '',
            effect: 'light',
            border: false,
            label: this.value
          },
          value
        )

        return h(
          'el-tag',
          {
            props: {
              size: opts.size,
              color: opts.color,
              type: opts.class,
              hit: opts.border,
              effect: opts.color ? 'dark' : opts.effect
            }
          },
          opts.label
        )
      } else {
        return h('div', value)
      }
    }
  }
}

export default dataType
